<template>
    <main>
        <nav>
            <div class="search">
                <el-input placeholder="输入关键字" :prefix-icon="Search" type="text" v-model="searchValue" />
            </div>
            <div class="btn-box">
                <div class="item" :class="{ active: activePath === item.path }" v-for="item in dataList" :key="item.path"
                    @click="handleClick(item)">
                    {{ item?.meta?.title }}
                </div>
            </div>

        </nav>
        <section>
            <router-view />
        </section>
    </main>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { componentList } from './router/routers';
import { Routers } from '@/types/routers'
import { useRouter, useRoute } from 'vue-router';
import { ref, watch, computed } from 'vue';

const route = useRoute()
const router = useRouter()
const searchValue = ref('')
const activePath = ref('')
const dataList = computed(() => {
    return componentList.filter((x: Routers) => x?.meta?.title.includes(searchValue.value))
})
const handleClick = (item: Routers) => {
    router.push({ name: item.name })
}
watch(() => route.path, (v) => {
    activePath.value = v
}, { immediate: true })
</script>
<style lang="less">
#app {
    width: 100%;
    height: 100%;
    overflow-y: overlay;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
}

main {
    width: 100%;
    height: 100%;
    display: flex;

    .search {
        padding: 8px 10px;
    }

    nav {
        width: 200px;
        height: 100%;
        text-align: center;
        border-right: 1px solid #ddd;

        .btn-box {
            height: calc(100% - 48px);
            overflow-y: overlay;

            .item {
                padding: 8px 0;
                cursor: pointer;
                border: 1px solid transparent;
                border-radius: 4px;
                transition: all .3s;

                &:hover {
                    border-color: rgb(52, 140, 255);
                    ;
                }
            }

            .active {
                color: rgb(52, 140, 255);
                border-color: rgb(52, 140, 255);

            }
        }
    }

    section {
        height: 100%;
        overflow-y: overlay;
        flex: auto;
        padding: 16px;
        box-sizing: border-box;
    }
}
</style>